<template>
    <div class="wh-100 p-8" >
        <div class="wh-100 overflow-auto" style="background-color: white">
            <div class="w-100   d-flex-between-center pl-16 pr-16 bor-base-b ch50">
               <div class="fs-14 fw-6">户口详情</div>
                <Button @click="$router.go(-1)" style="background-color: white">返回</Button>
            </div>
            <div class="w-100 h-30 pl-32 bor-base-b mt-8">
                <Form class="formStyle " :model="rowData" :label-width="labelWidth135">
                    <FormItem
                        label="学号" class="">
                        <Input class="formItem-input" v-model="rowData.xh" disabled="true" placeholder=""></Input>
                    </FormItem>
                    <FormItem
                        label="姓名" class="">
                        <Input class="formItem-input" v-model="rowData.xm" disabled="true" placeholder=""></Input>
                    </FormItem>
                    <FormItem
                        label="所在院系" class="">
                        <Input class="formItem-input" v-model="rowData.college" disabled="true" placeholder=""></Input>
                    </FormItem>
                    <FormItem
                        label="专业" class="">
                        <Input class="formItem-input" v-model="rowData.zy" disabled="true" placeholder=""></Input>
                    </FormItem>
                    <FormItem
                        label="班级" class="">
                        <Input class="formItem-input" v-model="rowData.szbj" disabled="true" placeholder=""></Input>
                    </FormItem>
                </Form>
            </div>
            <div class="w-100 h-65 mt-12 pl-32">
                <div class="w-65 h-100  " >
                    <Form  class="formStyle mt-8" ref="formRef" :model="formItem" :rules="formRules" :label-width="labelWidth135" >
                        <FormItem
                                  label="户口类型"
                                  :rules="[{ required: true, message: '该项必填', trigger: 'change'}]"
                                  prop="houseTransferTypeCode">
                            <Select class="formItem-input" v-model="formItem.houseTransferTypeCode" placeholder="请选择户籍类型">
                                <Option v-for="item in accountTypeList" :value="item.value">{{ item.title }}</Option>
                            </Select>
                        </FormItem>
                        <div class="d-flex ">
                            <FormItem
                                prop="houseTransferLocationCode"
                                :rules="[{ required: true,  trigger: 'change',validator: validatelocationOfTheUnit}]"
                                class="" label="户口地址">
                                <el-cascader
                                    class="formItem-input"
                                    v-model="formItem.houseTransferLocationCode"
                                    :options="locationOfTheUnitList"
                                    :props="provincesAndMunicipalitiesProps"
                                ></el-cascader>
                            </FormItem>

                        </div>
                        <FormItem  class="">
                            <Input class="formItem-input" v-model="formItem.houseTransferAddr" placeholder="请填写档案转递单位详细地址"></Input>
                        </FormItem>

                        <FormItem label="情况说明" class="">
                            <Input class="formItem-input-area" v-model="formItem.factSheet" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="选填(200字以内)"></Input>
                        </FormItem>
<!--                        :rules="[{ required: true, trigger: 'blur' ,validator:validateEvidentiaryMaterial}]"-->

                        <FormItem
                            prop="imageMaterial"
                            label="上传证明材料" class="">
                            <uploadPicture  :images="backImages" @beforeUpload="beforeUpload" ref="supportingMaterialRef" :max-count="3"></uploadPicture>
                        </FormItem>
                        <FormItem >
                            <div class="d-flex-between-center w-20 mb-8">
                                <Button @click="$router.go(-1)" >取消</Button>
                                <Button v-loading="submitLoadings" type="primary" class="" @click="submitRight">提交</Button>
                            </div>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import UploadPicture from '../../components/uploadPicture/uploadPicture.vue';
import { updateVal } from '../../util/ObjectUtil';
import { imageUploadDataApi, newProvincialDataApi } from '../../api/bys';
import { getDictDataByType } from '../../api';
import {
    archiveTransferPass,
    archiveTransferReject,
    getByLocationAPI, updateArchiveTransfer
} from '../../api/archivesManagement/archiveForwardingAddressApis';
import { updateApi } from '../../api/accountManagement/accountManagementApis';
const formRules = {};
export default {
    components: { UploadPicture },
    data(){
        const validateEvidentiaryMaterial= (rule, value, callback) => {
            if (this.$refs.supportingMaterialRef.formFile.length > 0 || this.formItem.supportingMaterial !== null) {
                callback();
            } else {
                callback(new Error('请上传证明材料'));
            }
        };
        const validatelocationOfTheUnit = (rule, value, callback) => {
            if (this.formItem.houseTransferLocationCode === null || this.formItem.houseTransferLocationCode === '') {
                callback(new Error('请选择户口转递所在地'));
            } else {
                callback();
            }
        };
        return{
            labelWidth135: 135,
            comment: "",
            sendMessage: false,
            send: [],
            isShowBtn: true,
            backLoadings: false,
            submitLoadings: false,
            backImages:"",
            message: '通过：如果学生填写的档案信息与证明材料一直，内容填写完整，审核无误可通过。\n' +
                '驳回：如果学生填写的档案信息与证明材料不一致，内容填写不完整，请填写驳回修改意见，\n' +
                '驳回后，学生修改后可以再次提交。',
            rowData: {},
            formItem: {
                sfzh: "",
                supportingMaterial: null,
                houseTransferTypeCode: "",
                houseTransferLocationCode: "",
                houseTransferAddr: "",
                factSheet: "",
            },
            formRules,
            validateEvidentiaryMaterial,
            validatelocationOfTheUnit,
            locationOfTheUnitList: [], // 单位所在地
            // 省市区级联
            provincesAndMunicipalitiesProps: {
                label: 'name',
                value: 'code',
                children: 'children'
            },
            accountTypeList: [],
        }
    },
    methods:{
        changeUnitLocation(){
            // this.$refs.formRef.validateField('unitLocation')
            // let whereAddressName=[]
            // let LocationCode=this.formItem.unitLocation
            // for (let i = 0; i < this.locationOfTheUnitList.length; i++) {
            //     if (this.locationOfTheUnitList[i].code == LocationCode[0]) {
            //         whereAddressName.push(this.locationOfTheUnitList[i].name)
            //     }
            //     if (this.locationOfTheUnitList[i].children) {
            //         let children = this.locationOfTheUnitList[i].children
            //         for (let j = 0; j < children.length; j++) {
            //             if (children[j].code == LocationCode[1]) {
            //                 whereAddressName.push(children[j].name)
            //             }
            //             if (children[j].children) {
            //                 let children2 = children[j].children
            //                 for (let k = 0; k < children2.length; k++) {
            //                     if (children2[k].code == LocationCode[2]) {
            //                         whereAddressName.push(children2[k].name)
            //                     }
            //                 }
            //             }
            //         }
            //     }
            // }
            // this.getByLocation(this.formItem.unitLocation[2],this.formItem.sfzh)
            // this.formItem.unitLocationName=whereAddressName.toString()
        },
        getByLocation(locationCode,idCard){
            // getByLocationAPI({locationCode:locationCode,idCard:idCard}).then((res) =>{
            //     console.log("res",res)
            //     let result = res.result[0]
            //     // 非师范
            //     if(result.isNormal == 0){
            //         if(result.notNormalUnitName && result.notNormalUnitAddress.length>1){
            //             let address={
            //                 unitName:result.notNormalUnitName || '',
            //                 unitAddress:result.notNormalUnitAddress || '',
            //                 unitZip:result.notNormalUnitZip || '',
            //                 unitContact:result.notNormalUnitContact || '',
            //                 unitTel:result.notNormalUnitTel || '',
            //             }
            //             this.$Modal.confirm({
            //                 title: '系统档案转递地址',
            //                 content: '检测到系统中当前填写的转递所在地有转递信息，是否使用系统信息覆盖当前填写信息？',
            //                 onOk: () => {
            //                     this.formItem.unitName=address.unitName
            //                     this.formItem.unitAddress=address.unitAddress
            //                     this.formItem.unitZip=address.unitZip
            //                     this.formItem.unitContact=address.unitContact
            //                     this.formItem.unitTel=address.unitTel
            //                 },
            //                 onCancel: () => {
            //                 }
            //             } )
            //             // this.replaceTheForwardingInformation(address)
            //         }
            //     } else{
            //         //   师范
            //         if(result.normalUnitName && result.normalUnitAddress.length>1){
            //             let address={
            //                 unitName:result.normalUnitName || '',
            //                 unitAddress:result.normalUnitAddress || '',
            //                 unitZip:result.normalUnitZip || '',
            //                 unitContact:result.normalUnitContact || '',
            //                 unitTel:result.normalUnitTel || '',
            //             }
            //             this.$Modal.confirm({
            //                 title: '系统档案转递地址',
            //                 content: '检测到系统中当前填写的转递所在地有转递信息，是否使用系统信息覆盖当前填写信息？',
            //                 onOk: () => {
            //                     this.formItem.unitName=address.unitName
            //                     this.formItem.unitAddress=address.unitAddress
            //                     this.formItem.unitZip=address.unitZip
            //                     this.formItem.unitContact=address.unitContact
            //                     this.formItem.unitTel=address.unitTel
            //                 },
            //                 onCancel: () => {
            //
            //                 }
            //             } )
            //             // this.replaceTheForwardingInformation(address)
            //         }
            //     }
            // })
        },

        async submitRight() {
            this.$refs.formRef.validate(async (valid) => {
                this.submitLoadings = true;
                console.log("this.rowData", this.formItem);
                let zmcl = []
                for (let i = 0; i < this.$refs.supportingMaterialRef.formFile.length; i++) {
                    let file = this.$refs.supportingMaterialRef.formFile[i];
                    if (file.type) {
                        // region TODO 上传证明材料
                        const formData = new FormData();
                        formData.append('file', file);
                        const uploadResponse = await imageUploadDataApi(formData);
                        if (uploadResponse.code == 200) {
                            this.$refs.supportingMaterialRef.formFile[i] = uploadResponse.result
                        }
                    }
                }
                zmcl = this.$refs.supportingMaterialRef.formFile
                this.formItem.supportingMaterial = zmcl
                console.log("this.rowData", this.formItem);

                let res1 = await updateApi(this.formItem)
                if (res1) {
                    if (res1.code == 200) {
                        this.$Message.success('提交成功');
                        this.$router.go(-1)
                    }
                    this.submitLoadings = false
                }
            });




        },
        beforeUpload(){
            this.$refs.formRef.validateField('imageMaterial');
        },
        newObtainTheCascadingDataOfProvincesAndCities(){
            newProvincialDataApi().then((res) =>{
                this.locationOfTheUnitList = res.result;
                console.log("this.locationOfTheUnitList",this.locationOfTheUnitList)
            })
        },
        obtainTheAccountMigrationType(){
            getDictDataByType('household-transfer-type').then(res => {
                if(res.code === 200){
                    this.accountTypeList=res.result
                }
            });
        },
        onRestWindow() {
        //   this.columns = this.restTableCellWidth(this.columns_1)
          this.labelWidth135 = this.searchLabelWidth(this.labelWidth135)
      },

    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.newObtainTheCascadingDataOfProvincesAndCities();
        this.obtainTheAccountMigrationType();
      console.log(this.$route.params.row);
        if(this.$route.params.row ){
            this.rowData = this.$route.params.row;
            updateVal(this.formItem, this.rowData);
            // this.formItem.sfzh = this.rowData.idCard;
            this.backImages = this.formItem.supportingMaterial;
          let dwszd = []
            if(this.rowData.houseTransferLocationCode.indexOf && this.rowData.houseTransferLocationCode.indexOf(",") != -1 ){
                dwszd=this.rowData.houseTransferLocationCode.split(',') || '';
              this.formItem.houseTransferLocationCode=dwszd
            }else{
                this.formItem.houseTransferLocationCode=[]
                this.formItem.houseTransferLocationCode.push(parseInt(this.rowData.houseTransferLocationCode))
            }
            console.log(this.rowData);
        }

    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    },
};
</script>
<style scoped lang="less">

//form表单间距统一修改
.ivu-form-item {
    margin-bottom: 0.05rem !important;
}

.formStyle{
    width:800px;
    .formItem-input{
        width: 300px;
    }
    .formItem-input-area{
        width: 360px;
    }
}
.ch50 {
    height: 50px;
}
</style>